<template>
    <view class="container">
        <!-- 用药提醒列表区域 -->
        <view class="reminder-list">
            <!-- 当reminderList为空时显示提示信息 -->
            <view v-if="reminderList.length === 0" class="no-reminder">暂无闹钟，可添加</view>
            <!-- 当reminderList不为空时显示列表 -->
            <view class="reminder-item" v-else v-for="(reminder, index) in reminderList" :key="index"  >
                <view class="reminder-info">
                    <text class="reminder-time">{{truncateAlarmTime(reminder.alarmTime) }}</text>
                    <text class="reminder-group">间隔{{ parseHour(reminder.interval) }} h</text>
                </view>
                <view class="reminder-detail">
                    <button class="delete-btn" size="mini" @click="deleteTime(reminder.id)" plain>删除闹钟</button>
                    <button class="detail-btn" size="mini" @click="handleAddTimeGroup(reminder.id)" plain>选择</button>
                </view>
            </view>
        </view>
        <!-- 添加闹钟按钮 -->
        <button class="add-alarm-btn" @click="showEditBox">添加新时间</button>
        <!-- 编辑盒子 -->
        <view class="edit-box" :style="{ bottom: showEdit ? '0' : '-100%' }">
            <view class="edit-box-content">
                <!-- 将输入框改成picker组件 -->
                <view class="picker-row">
                    <picker mode="time" :value="editAlarmTime" @change="onTimeChange">
                        <view class="picker">
                            服用时间{{editAlarmTime}}
                        </view>
                    </picker>
                    <!-- 将输入框改成数字选择器 -->
                    <picker mode="selector" :value="editIntervalIndex" :range="intervalOptions" @change="onIntervalChange">
                        <view class="picker">
                            间隔{{intervalOptions[editIntervalIndex]}} h
                        </view>
                    </picker>
                </view>
            </view>
            <view class="edit-box-footer">
                <button class="cancel-btn" @click="hideEditBox">取消</button>
                <button class="confirm-btn" @click="confirmEdit">确定</button>
            </view>
        </view>
    </view>
</template>

<script>
import { useTimeStore } from '@/store/time'
const timeStore = useTimeStore()

export default {
    setup(){
        return{
            timeStore
        }
    },
    async onLoad(options){
        await this.timeStore.getAlarmList()
        this.reminderList = this.timeStore.alarmList
        this.groupId = options.id
    },
    data() {
        return {
            groupId:Number,
            reminderList: [],
            showEdit: false, // 控制编辑盒子的显示与隐藏
            editAlarmTime: '', // 编辑的时间
            editIntervalIndex: 0, // 编辑的时间间隔索引
            intervalOptions: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14,15,16,17,18,19,20,21,22,23,24], // 时间间隔选项
        };
    },
    methods: {
        // 处理添加时间组合业务
        async handleAddTimeGroup(id){
            this.timeStore.addTimeGroup(id)
            await this.timeStore.getAlarmList()
            this.reminderList = this.timeStore.alarmList
            uni.showModal({
              title:'添加成功',
              content:'点击用药提醒查看详情',
              showCancel:false,
              success() {
                uni.switchTab({
                    url: '/pages/home/home'
                });
              }
            })
        },
        async deleteTime(id){
            console.log(1);
            await this.timeStore.deleteTime(id)
            uni.showToast({
                title:'删除成功',
                icon:'success',
                duration:1000
            })
            setTimeout(() => {
                wx.redirectTo({
                    url: '/pages/reminder/timeList' // 替换为当前页面的实际路径
                })
            },100)
        },
        parseHour(time){
            return time <= 24? time : time / 3600;
        },
        truncateAlarmTime(time) {
            // 这里假设截取前3个字符，你可以根据实际需求修改截取的位置
            return time ? time.substring(10, 16) : '';
        },
        /**
         * 显示编辑盒子
         */
        showEditBox() {
            this.showEdit = true;
        },
        /**
         * 隐藏编辑盒子
         */
        hideEditBox() {
            this.showEdit = false;
        },
        /**
         * 确认编辑
         */
        async confirmEdit() {
            
            if (this.editAlarmTime && this.editIntervalIndex !== null) {
                const interval = this.intervalOptions[this.editIntervalIndex];
                console.log(this.editAlarmTime);
                await this.timeStore.addNewAlarm(this.editAlarmTime, interval)
                uni.showToast({
                    title:'添加成功',
                    icon:'success',
                    duration:1000
                })
                setTimeout(()=>{
                    wx.redirectTo({
                        url: '/pages/reminder/timeList' // 替换为当前页面的实际路径
                    })
                },100)
                this.hideEditBox();
                this.editAlarmTime = '';
                this.editIntervalIndex = 0;
            }
        },
        /**
         * 处理时间选择变化
         * @param {Object} e - 事件对象
         */
        onTimeChange(e) {
            this.editAlarmTime = e.detail.value;
        },
        /**
         * 处理时间间隔选择变化
         * @param {Object} e - 事件对象
         */
        onIntervalChange(e) {
            this.editIntervalIndex = e.detail.value;
        }
    }
};
</script>

<style lang="scss">
.container {
    padding: 20rpx;
    background-color: #f5f5f5;
    min-height: 100vh;
    position: relative; // 相对定位，用于子元素的绝对定位
}

// 用药提醒列表区域样式
.reminder-list {
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    width: 100%; // 设置列表宽度为 100%
    box-sizing: border-box; // 确保宽度包含内边距和边框

    .no-reminder {
        text-align: center;
        color: #999;
        font-size: 28rpx;
    }

    .reminder-item {
        display: flex;
        align-items: center;
        padding: 20rpx;
        border-bottom: 1rpx solid #f5f5f5;

        &:last-child {
            border-bottom: none;
        }

        .reminder-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .reminder-time {
                font-size: 28rpx;
                color: #333;
                margin-bottom: 16rpx;
            }

            .reminder-group {
                font-size: 24rpx;
                color: #666;
            }
        }

        .reminder-detail {
            .delete-btn{
                margin-right: 20rpx;

                color: #2ac2d1;
                border-color:#2ac2d1;
                &::after {
                    border-color: #2ac2d1;
                }
            }

            .detail-btn {
                font-size: 24rpx;
                color: #2ac2d1;
                border-color: #2ac2d1;

                &::after {
                    border-color: #2ac2d1;
                }
            }
        }
    }
}

// 添加闹钟按钮样式
.add-alarm-btn {
    position: fixed; // 固定定位
    bottom: 100rpx; // 距离底部 20rpx
    left: 50%; // 水平居中
    transform: translateX(-50%); // 水平居中偏移
    font-size: 28rpx;
    color: #fff;
    background-color: #2ac2d1;
    padding: 10rpx 20rpx;
    border-radius: 16rpx;
    width: calc(100% - 40rpx); // 减去容器的左右内边距
    box-sizing: border-box; // 确保宽度包含内边距和边框
}

// 编辑盒子样式
.edit-box {
    position: fixed;
    left: 0;
    width: 100%;
    height: 30%; // 设置盒子高度为屏幕高度的 80%
    background-color: #fff;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
    transition: bottom 0.3s ease;
    padding: 50rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .edit-box-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;

        .picker-row {
            display: flex;
            justify-content: space-around;
            width: 100%;

            .picker {
                width: 250rpx;
                margin-bottom: 30rpx;
                padding: 20rpx;
                border: 2rpx solid #ccc;
                border-radius: 20rpx;
                font-size: 30rpx;
                color: #333;
                background-color: #f9f9f9;
                box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);
                transition: all 0.3s ease;

                &:focus {
                    border-color: #2ac2d1;
                    box-shadow: 0 5rpx 10rpx rgba(42, 194, 209, 0.3);
                }

                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    }

    .edit-box-footer {
        display: flex;
        justify-content: space-around;
        margin-top: 20rpx;

        .cancel-btn,
        .confirm-btn {
            width: 40%;
            font-size: 30rpx;
            padding: 15rpx;
            border-radius: 20rpx;
            border: none;
            box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .cancel-btn {
            background-color: #f0f0f0;
            color: #666;

            &:hover {
                background-color: #e0e0e0;
            }
        }

        .confirm-btn {
            background-color: #2ac2d1;
            color: #fff;

            &:hover {
                background-color: #22a3b0;
            }
        }
    }
}
</style>